<template>
	<view>
		<scroll-view  class="page" >
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="content">{{receiveName}}</block>
			</cu-custom>
			<!-- <view class="padding flex flex-direction">
			  <view v-for="(item) in list">
			  <div style="border: 10px;">{{item.Phone}}</div>
			  <div >{{item.Type}}</div>
			  <div >{{item.Territory}}</div> 
			  <div style="width: 10rem;" > </div>
			  <div >{{dateFormat(item.CreateTime)}}</div>
			  </view>
			</view> -->
			<view class="cu-bar bg-white solid-bottom" :style="[{animation: 'show 0.5s 1'}]" @tap="gobilling(1)">
				<view class="action" >
					<text class='cuIcon-title text-blue'></text>开单情况
				</view>
			</view>
			 <view offset-top="28" v-show="billingflag">
			        <div style="scroll:" class="tableHeader" >
			          <div class="tableHeaderName" style="width: 30%;">单号</div>
			          <div class="tableHeaderName" style="width: 20%;">数量</div>
			          <div class="tableHeaderName" style="width: 20%;">金额</div>
			          <div class="tableHeaderName" style="width: 30%;border-radius: 0 20rpx 0 0;">创建时间</div>
			        </div>
			        <scroll-view  scroll-y="true" scroll-x="true" class="scroll-Y">
			          <div class="tableContent"  v-for="(item) in billing" >
			            <div class="tableContentName" style="width: 30%;" ><view style="margin: 20rpx;">{{item.SalesOrder}}</view></div>
			            <div class="tableContentName" style="width: 20%;"><view style="margin: 20rpx;">{{item.TotalQuantity}}</view></div>
			            <div class="tableContentName" style="width: 20%;" ><view style="margin: 20rpx;">{{item.TotalSum}}</view></div>
			            <div class="tableContentName" style="width: 30%;" ><view style="margin: 20rpx;">{{dateFormat(item.CreateTime)}}</view></div>
			          </div>
			        </scroll-view>
					<view v-if="flag1===1">
					   <view class="textcss">没有数据了</view>
					</view>
			</view>
			<view class="cu-bar bg-white solid-bottom" :style="[{animation: 'show 0.5s 1'}]" @tap="gobilling(2)">
				<view class="action" >
					<text class='cuIcon-title text-blue'></text>签收情况
				</view>
			</view>
			 <view offset-top="28" v-show="billistflag">
			        <div style="scroll:" class="tableHeader" >
			          <div class="tableHeaderName" style="width: 30%;">单号</div>
			          <div class="tableHeaderName" style="width: 20%;">数量</div>
			          <div class="tableHeaderName" style="width: 20%;">金额</div>
			          <div class="tableHeaderName" style="width: 30%;border-radius: 0 20rpx 0 0;">创建时间</div>
			        </div>
			        <scroll-view  scroll-y="true" scroll-x="true" class="scroll-Y">
			          <div class="tableContent"  v-for="(item) in billlist" >
			            <div class="tableContentName" style="width: 30%;" ><view style="margin: 20rpx;">{{item.SalesOrder}}</view></div>
			            <div class="tableContentName" style="width: 20%;"><view style="margin: 20rpx;">{{item.TotalQuantity}}</view></div>
			            <div class="tableContentName" style="width: 20%;" ><view style="margin: 20rpx;">{{item.TotalSum}}</view></div>
			            <div class="tableContentName" style="width: 30%;" ><view style="margin: 20rpx;">{{dateFormat(item.CreateTime)}}</view></div>
			          </div>
			        </scroll-view>
					<view v-if="flag2===1">
					   <view class="textcss">没有数据了</view>
					</view>
			</view>
			 <view class="cu-bar bg-white solid-bottom" :style="[{animation: 'show 0.5s 1'}]" @tap="gobilling(3)">
			 	<view class="action" >
			 		<text class='cuIcon-title text-blue'></text>对账情况
			 	</view>
			 </view>
			  <view offset-top="28" v-show="billcomfirmflag">
			         <div style="scroll:" class="tableHeader" >
			           <div class="tableHeaderName" style="width: 30%;">对账单号</div>
			           <div class="tableHeaderName" style="width: 20%;">开始日期</div>
			           <div class="tableHeaderName" style="width: 20%;">结束日期</div>
			           <div class="tableHeaderName" style="width: 30%;border-radius: 0 20rpx 0 0;">本期余额</div>
			         </div>
			         <scroll-view  scroll-y="true" scroll-x="true" class="scroll-Y">
			           <div class="tableContent"  v-for="(item) in billconfirm" >
			             <div class="tableContentName" style="width: 30%;" ><view style="margin: 20rpx;">{{item.Code}}</view></div>
			             <div class="tableContentName" style="width: 20%;"><view style="margin: 20rpx;">{{dateFormat(item.StartTime)}}</view></div>
			             <div class="tableContentName" style="width: 20%;" ><view style="margin: 20rpx;">{{dateFormat(item.EndTime)}}</view></div>
			             <div class="tableContentName" style="width: 30%;" ><view style="margin: 20rpx;">{{item.Residue}}</view></div>
			           </div>
			         </scroll-view>
			 		<view v-if="flag3===1">
			 		   <view class="textcss">没有数据了</view>
			 		</view>
			 </view>
			
		</scroll-view>
	</view>

</template>

<script>
	
	export default {
		data() {
			return {
				billing:[],
				billlist:[],
				billconfirm:[],
				receiveId:null,
				receiveName:null,
				flag1:0,
				flag2:0,
				flag3:0,
				billingflag:false,
				billistflag:false,
				billcomfirmflag:false
			}
		},
		onLoad: function (option) {
			console.log(option.id);
			console.log(option.name);
			this.receiveId=option.id;
			this.receiveName=option.name;
			this.loadBillingCount();
			this.loadBilllistCount();
			this.loadBillConfirmCount();
		},
		methods: {
			loadBillingCount(){
				let url = 'BO/BIlling/GetDataListByMoreCondition';
				this.$http.post(url,{SortField:'CreateTime',SortType:'desc',Search:[{Condition:'CreatorId',Keyword:this.receiveId},{Condition:'IsCancel',Keyword:false}]}).then(res=>{
					console.log("res::",res)
					console.log("res::",res.data.Success)
				  if(res.data.Success){
					this.billing = res.data.Data
					if(res.data.Total==0){
						this.flag1=1;
					}
				  }
				})
			},
			
				loadBilllistCount(){
					let url = 'BO/BillList/GetDataListByMoreCondition';
					this.$http.post(url,{SortField:'CreateTime',SortType:'desc',Search:[{Condition:'CId',Keyword:this.receiveId},{Condition:'Status',Keyword:1}]}).then(res=>{
						console.log("res::",res)
						console.log("res::",res.data.Success)
					  if(res.data.Success){
						this.billlist = res.data.Data
						if(res.data.Total==0){
							this.flag2=1;
						}
					  }
					})
				},
				loadBillConfirmCount(){
					let url = 'BO/Bill_Confirm/GetDataListByMoreCondition';
					this.$http.post(url,{SortField:'CreateTime',SortType:'desc',Search:[{Condition:'CreatorId',Keyword:this.receiveId}]}).then(res=>{
						console.log("res::",res)
						console.log("res::",res.data.Success)
					  if(res.data.Success){
						this.billconfirm = res.data.Data
						if(res.data.Total==0){
							this.flag3=1;
						}
					  }
					})
				},
			dateFormat(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				// return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				return year + "-" + month + "-" + day;
			},
			gobilling(type){
				if(type==1){
					this.billingflag=!this.billingflag;
					// this.flag1=!this.billingflag;
					this.billistflag=false;
					this.billcomfirmflag=false;
					console.log(this.flag1);
				}
				if(type==2){
					this.billistflag=!this.billistflag;
					// this.flag2=!this.billistflag;
					this.billingflag=false;
					this.billcomfirmflag=false;
					console.log(this.flag2);
				}
				if(type==3){
					this.billcomfirmflag=!this.billcomfirmflag;
					// this.flag3=!this.billcomfirmflag;
					this.billingflag=false;
					this.billistflag=false;
					console.log(this.flag3);
				}
			}
		}
	}
</script>

<style>
	.textcss{
		font-size: 22rpx;
	}
	/*table样式梳理*/
	.tableHeader{
	  display: flex;
	}
	.tableHeaderId{
	  width: 85rpx;
	  height: 70rpx;
	  background-color:#F4F6FF ;
	  border-radius: 20rpx 0 0 0;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 22rpx;
	  font-weight: bold;
	  color: #333333;
	  border: 1rpx solid #DDE2FA;
	}
	.tableHeaderName{
	  width: 230rpx;
	  height: 70rpx;
	  background-color: #F4F6FF;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 22rpx;
	  font-weight: bold;
	  color: #333333;
	  border: 1rpx solid #DDE2FA;
	}
	.tableHeaderItem{
	  width: 168rpx;
	  height: 70rpx;
	  background-color: #F4F6FF;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 22rpx;
	  font-weight: bold;
	  color: #333333;
	  border-radius: 0 20rpx 0 0;
	  border: 1rpx solid #DDE2FA;
	}
	.tableContent{
	  display: flex;
	}
	.tableContentId{
	  width: 86rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  min-height: 108rpx;
	  background-color:#F8FCFF;
	  border: 1rpx solid #DDE2FA;
	}
	.tableContentName{
	  width: 230rpx;
	  font-size: 22rpx;
	  color: #333333;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  border: 1rpx solid #DDE2FA;
	}
	.tableContentRight{
	  width: 173rpx;
	  font-size: 22rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  // flex-direction: column;
	  flex-wrap: wrap;
	  border: 1rpx solid #DDE2FA;
	}
</style>
